import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import useTest from './useTest'
import {TransitionPresets, useTransition } from '@vueuse/core'
import useUser from './useUser'
export default function () {
    const chartRef = ref(null)
    const chartRefRight=ref(null)
    let chartInstance = null
    let charRightInstance=null
    const {problemNumber,getProblemNumberByDifficulty}=useUser()
    const { ranking, getRanking } = useTest()

    const source = ref<number>(0)
    const score = useTransition(source, {
        duration: 2000,
        transition: TransitionPresets.easeInOutCubic,
      })

    
    async function init(userId){
        chartInstance = echarts.init(chartRef.value)
        await getRanking(userId)
        setTimeout(()=>{source.value=ranking.value.rankingScore},1000)
        
        // 模拟数据
        const data = ranking.value.loginUserRankingList
        // 配置项
        const options = {
            xAxis: {
                type: 'category',
                data: data.map((item) => item.createTime),
                axisLabel: {  
                    show: false  // 隐藏x轴标签  
                }  
            },
            yAxis: {
                min:1000,
                type: 'value',
                axisLabel: {  
                    formatter: '{value}'  // 确保刻度标签正确显示数值  
                }  
            },
            series: [
                {
                    data: data.map((item) => item.ranking),
                    type: 'line'
                }
            ],
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {  
                    var tooltipContent = '';  
                    params.forEach(function (item) {  
    
                        var formattedValue = item.value;
                          
                        tooltipContent += 'Time: ' + item.name + '<br/>' +  
                                          'Ranking: ' + formattedValue + '<br/><br/>';  
                    });  
                    // 去除最后一个多余的换行  
                    tooltipContent = tooltipContent.slice(0, -5);  
                    return tooltipContent;  
                } 
            }
        }

        // 设置图表配置项
        chartInstance.setOption(options)
    }

    async function init2(userId) {
        
        charRightInstance = echarts.init(chartRefRight.value)
        try{
            await getProblemNumberByDifficulty(userId)
        }catch(error){

        }
        
        const option = {
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: problemNumber.value[0].solveNumber,
                    name: '简单:' + problemNumber.value[0].solveNumber + '/' + problemNumber.value[0].totalNumber
                  },
                  {
                    value: problemNumber.value[1].solveNumber,
                    name: '中等:' + problemNumber.value[1].solveNumber + '/' + problemNumber.value[1].totalNumber
                  },
                  {
                    value: problemNumber.value[2].solveNumber,
                    name: '困难:' + problemNumber.value[2].solveNumber + '/' + problemNumber.value[2].totalNumber
                  }
                ]
              }
            ]
          };
          
          charRightInstance.setOption(option)
    }


    onUnmounted(() => {
        if (chartInstance) {
            chartInstance.dispose()
            chartInstance = null
            if(charRightInstance !==null)charRightInstance.dispose()
            charRightInstance=null
        }
    })

    return {score, ranking,chartRefRight,chartRef,init,init2 }
}